<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/plugins/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/admin-lte/css/adminlte.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/admin-lte/css/skins/_all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables/jquery.dataTables.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/daterangepicker/daterangepicker.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/bootstrap-multiselect/css/bootstrap-multiselect.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/treetable/bootstrap-treetable.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}">
    <link rel="stylesheet" th:href="@{/plugins/toast/jquery.toast.min.css}">
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <!--import header here-->
    <header class="main-header">
        <!-- Logo -->
        <a class="logo">
            <span class="logo-mini">
                <b>A</b>LT
            </span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg">
                <b>Admin</b>LTE
            </span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li><span class="header-item" id="header_time"></span></li>
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                            <img src="/img/user-160x160.gif" class="user-image" alt="User Image">
                            <span class="hidden-xs black-font" id="userNameSmall"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- User image -->
                            <li class="user-header">
                                <img src="/img/user-160x160.gif" class="img-circle" alt="User Image">
                                <p id="userNameBig"></p>
                            </li>
                            <!-- Menu Body -->
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="text-center">
                                    <button type="button" data-toggle="modal" data-target="#passwordModal"
                                            class="btn btn-primary btn-flat">修改密码
                                    </button>
                                    <button type="button" id="logout" class="btn btn-default btn-flat">注销登录</button>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <!-- Control Sidebar Toggle Button -->
                </ul>
            </div>
        </nav>
    </header>
    <!--import sidebar here-->
    <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
            <!-- sidebar menu: : style can be found in sidebar.less -->
            <ul class="sidebar-menu tree" data-widget="tree" id="menuTree">
                <li class="header">导航栏</li>
            </ul>
        </section>
        <!-- /.sidebar -->
    </aside>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" data-ajax-content="true">
        <!-- Content Header (Page header) -->
    </div>
    <!-- /.content-wrapper -->
</div>
<!-- password Modal -->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="passwordModalLabel"
     aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">修改密码</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <form action="<%= changePassword.path %>" id="changePasswordForm"
                              method="<%= changePassword.method %>" role="form">
                            <input type="hidden" name="loginId" id="loginId"/>
                            <div class="box-body">
                                <div class="form-group">
                                    <label>旧密码<span class="hon-required">*</span></label>
                                    <input class="form-control" type="password" name="oldPassword" id="oldPassword"
                                           maxlength="16"/>
                                </div>
                                <div class="form-group">
                                    <label>新密码<span class="hon-required">*</span></label>
                                    <input class="form-control" type="password" name="newPassword" id="newPassword"
                                           maxlength="16"/>
                                </div>
                                <div class="form-group">
                                    <label>确认密码 <span class="hon-required">*</span></label>
                                    <input class="form-control" type="password" name="confirmPassword" maxlength="16"/>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="changePassword" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/plugins/jQuery/jquery-3.6.0.min.js}"></script>
<script th:src="@{/plugins/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/plugins/echarts/echarts.min.js}"></script>
<script th:src="@{/plugins/datatables/jquery.dataTables.min.js}"></script>
<script th:src="@{/plugins/marcj-css-element-queries/ElementQueries.js}"></script>
<script th:src="@{/plugins/marcj-css-element-queries/ResizeSensor.js}"></script>
<script th:src="@{/plugins/daterangepicker/moment.min.js}"></script>
<script th:src="@{/plugins/daterangepicker/daterangepicker.min.js}"></script>
<script th:src="@{/plugins/admin-lte/js/adminlte.min.js}"></script>
<script th:src="@{/plugins/bootstrap-multiselect/js/bootstrap-multiselect.min.js}"></script>
<script th:src="@{/plugins/jquery-validation/jquery.form.js}"></script>
<script th:src="@{/plugins/jquery-validation/jquery.validate.min.js}"></script>
<script th:src="@{/plugins/jquery-validation/additional-methods.min.js}"></script>
<script th:src="@{/plugins/jquery-validation/localization/messages_zh.js}"></script>
<script th:src="@{/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/plugins/toast/jquery.toast.min.js}"></script>
<script th:src="@{/plugins/zTree/js/jquery.ztree.all.min.js}"></script>
<script th:src="@{/plugins/treetable/bootstrap-treetable.min.js}"></script>
<script th:src="@{/plugins/base64/base64js.min.js}"></script>
<script th:src="@{/plugins/socket/sockjs.min.js}"></script>
<script th:src="@{/plugins/socket/stomp.min.js}"></script>
<script th:src="@{/js/ajax-load.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:inline="javascript">
    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'Authorization': window.localStorage.getItem('ems-login-info')
            },
            contentType: 'application/json;charset=UTF-8',
            complete: function (e) {
                if (e.status === 401) {
                    swal("登录信息已过期，请重新登录")
                        .then(function () {
                            window.localStorage.removeItem('ems-login-info');
                            window.localStorage.removeItem('ems-menus-info');
                            window.location.href = '/login'
                        });
                }
            }
        });

        let $changePasswordForm = $('#changePasswordForm');
        let $passwordModal = $('#passwordModal');
        let $menuTree = $('#menuTree');

        let menuData = [[${menus}]];

        let menus = function (menuData) {
            let str = "";
            menuData.forEach(menu => {
                if (!!menu.children && menu.children.length !== 0) {
                    str += '<li class="treeview"><a href="#"><i class="fa fa-'
                        + menu.icon + '"></i><span> '
                        + menu.name + '</span><span class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span></a>'
                        + '<ul class="treeview-menu">' + menus(menu.children) + '</ul>';
                } else {
                    str += '<li><a href="#page/'
                        + menu.path + '"><i class="fa fa-'
                        + menu.icon + '"></i><span> '
                        + menu.name + '</span></a></li>';
                }
            });
            return str
        };

        $menuTree.append(menus(menuData));

        $('#loginId').val(window.localStorage.getItem('ems-user-info'));

        $('#userNameBig, #userNameSmall').html(window.localStorage.getItem('ems-user-info'));

        $('#changePassword').unbind('click').on('click', function () {
            let obj = $changePasswordForm.serializeObject();
            $changePasswordForm.ajaxSubmit({
                dataType: 'JSON',
                beforeSubmit: function (arr, $form, options) {
                    return !!$changePasswordForm.validate().form();
                },
                resetForm: true,
                clearForm: true,
                dataBody: JSON.stringify(obj),
                timeout: 1000,
                complete: function (e) {
                    if (e.status === 200) {
                        swal({
                            title: "修改成功",
                            text: "success",
                            icon: "success",
                        }).then(function () {
                            $passwordModal.modal('hide');
                        })
                    } else if (e.status === 401) {
                        swal("登录信息已过期，请重新登录")
                            .then(function () {
                                window.localStorage.removeItem('ems-login-info');
                                window.location.href = '/login'
                            });
                    } else if (e.status === 500) {
                        swal({
                            title: "修改失败",
                            text: "error",
                            icon: "error",
                        }).then(function () {
                            $passwordModal.modal('hide');
                        })
                    }
                }
            });
        });

        $passwordModal.on('show.bs.modal', function () {
            $changePasswordForm.resetForm();
            $(this).find('label.error').remove();
        });

        $('#logout').unbind('click').on('click', function () {
            $.ajax({
                type: '<%= logout.method %>',
                url: '<%= logout.path %>',
                contentType: 'application/json;charset=UTF-8',
            }).done(function () {
                window.localStorage.removeItem('ems-login-info');
                window.location.href = '/login'
            });
        });

        $changePasswordForm.validate({
            rules: {
                loginId: "required",
                oldPassword: {
                    required: true,
                    remote: {
                        url: '<%= checkPassword.path %>',
                        type: '<%= checkPassword.method %>',
                        contentType: 'application/json;charset=UTF-8',
                        data: {
                            password: function () {
                                return $('#oldPassword').val();
                            }
                        }
                    }
                },
                newPassword: {
                    required: true
                },
                confirmPassword: {
                    required: true,
                    equalTo: "#newPassword"
                }
            },
            messages: {
                oldPassword: {
                    required: "请输入旧密码",
                    remote: "密码错误，请重新输入"
                },
                newPassword: {
                    required: "请输入新密码"
                },
                confirmPassword: {
                    required: "请输入确认密码",
                    equalTo: "两次密码输入不一致"
                }
            }
        });

        G.date.freshShowTime('#header_time');
    })
</script>
</body>

</html>
